<template>
  <h1>个人简历练习</h1>

  <table border="1px" >
    <tr>照片: <td></td><td><img :src="person.imgUrl" alt="" width="100px"></td></tr>
    <tr>姓名: <td></td><td>{{person.name}}</td></tr>
    <tr>年龄: <td></td><td>{{person.age}}</td></tr>
    <tr>好友: <td></td>
      <td>
        <ul>
          <li v-for="person in person.friends">
            {{person}}
          </li>
        </ul>
      </td>
    </tr>
  </table>
  <hr>
  <button @click="load()">加载</button>

</template>

<script setup>
  import {ref} from "vue";

  const person =ref({name:"",age:"",gender:"",imgUrl:"",friends:[]});

  const load = () => {
    person.value = {
          name: "范传奇",
          age: 20,
          friends: ['路飞','索隆','娜美'],
          imgUrl: "fcq.jpg",
    }
  }
</script>

<style scoped>

</style>